﻿<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Imageo.ui.Home" %>

<%@ Register Src="../controls/TrailGMap.ascx" TagName="TrailGMap" TagPrefix="bintje" %>
<%@ Register Src="../controls/TrailSmallTable.ascx" TagName="TrailSmallTable" TagPrefix="bintje" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContentPlaceholder" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceholder" runat="Server">

    <script type="text/javascript">
        var geocoder;

        $(document).ready(function() {
            $("#tabsHome").tabs();
            $('#<%=btnSearchArea.ClientID %>').button();

            $('#tabs').buttonset();
            $("#optLatest").change(function() { updateTabs(); });
            $("#optPopular").change(function() { updateTabs(); });
            updateTabs();
            
            geocoder = new google.maps.Geocoder();
            // TODO: It could be possible to know where the client is
            // but right now the property is empty
            //            var possibleLocation = google.loader.ClientLocation;
        });


        function updateTabs()
        {
            var selection = $("input[@name='tabOptions']:checked").val();
            switch(selection)
            {
                case "optLatest":
                    $('#divLatest').show();
                    $('#divPopular').hide();
                    break;
                case "optPopular":
                    $('#divLatest').hide();
                    $('#divPopular').show();
                    break;
            }
        }

        var defaultSearchAreaText = "City, Country";
        function WaterMarkArea(txt, evt) {
            if (txt.value.length == 0 && evt.type == "blur") {
                txt.style.color = "gray";
                txt.value = defaultSearchAreaText;
            }
            if (txt.value == defaultSearchAreaText && evt.type == "focus") {
                txt.style.color = "black";
                txt.value = "";
            }
        }

        function codeAddress() {
            var address = document.getElementById("<%=txtSearchArea.ClientID %>").value;
            if (geocoder) {
                geocoder.geocode({ 'address': address }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        document.map.setCenter(results[0].geometry.location);
                        document.map.setZoom(12);
                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });
            }
        }
    </script>

    <table width="100%">
        <tr valign="top">
            <td>
                <bintje:TrailGMap ID="gmapTrails" runat="server" mapmode="viewMode" Width="100%" Height="470"></bintje:TrailGMap>
            </td>
            <td style="width: 400px">
                <div id="divIPhone" runat="server" class="pnlCurvyWhite" style="height: 70px">
                    <span class="blueTitle" style="margin-bottom: 10px;" >Coming soon: iPhone App!</span><br />
                    <div style="float: left;">
                        <img alt="" src="../images/IconMobileClient.png" height="50" width="50" style="margin: 0px 10px 20px 5px; " />
                    </div>
                    Find and create trails while on the move!<br />
                    The easy-to-use iPhone App will be soon available at the iTunes store.
                </div>
                <div class="pnlCurvyWhite" style="height: 370px; margin-top:1px; margin-bottom:0px; ">
                    <span id="tabs">
                        <input type="radio" id="optLatest" value="optLatest" name="tabOptions" checked="checked" /><label for="optLatest">Latest Trails</label>
                        <input type="radio" id="optPopular" value="optPopular" name="tabOptions" /><label for="optPopular">Popular Trails</label>
                    </span>
                    <div id="divLatest">
                        <bintje:TrailSmallTable ID="trailTableLatest" runat="server" Width="300px" Height="370px"></bintje:TrailSmallTable>
                    </div>
                    <div id="divPopular">
                        <bintje:TrailSmallTable ID="trailTablePopular" runat="server" Width="300px" Height="370px"></bintje:TrailSmallTable>
                    </div>
                </div>
                
                
            </td>
        </tr>
        <tr>
            <td>
                <table width="100%">
                    <tr>
                        <td>
                            <div class="pnlCurvyWhite" runat="server" id="divImageoLearn" style="height: 140px;">
                                <span class="blueTitle">Learn more about ImaGeo</span><br />
                                <br />
                                Use our online tutorial to learn how to use this site and the mobile application
                                <br />
                                <br />
                                <a href="Tutorial.aspx" >Visit the tutorial</a>
                            </div>
                        </td>
                        <td width="300px">
                            <asp:Panel runat="server" ID="pnlSearchArea" DefaultButton="btnSearchArea" CssClass="pnlCurvyWhite">
                                <div style="height: 140px;">
                                    <span class="blueTitle">Find trails in your area</span><br />
                                    <br />
                                    <div class="txtSearchBox">
                                    <table >
                                        <tr>
                                            <td style="width: 100%">
                                                <asp:TextBox ID="txtSearchArea" runat="server" onblur="WaterMarkArea(this, event);" onfocus="WaterMarkArea(this, event);" Style="width: 100%">City, Country</asp:TextBox>
                                            </td>
                                            <td>
                                                <asp:Button class="btnSearch" runat="server" ID="btnSearchArea" Text="GO" OnClientClick="codeAddress(); return false;" />
                                            </td>
                                        </tr>
                                    </table>
                                    </div>
                                    <br />
                                </div>
                            </asp:Panel>
                        </td>
                    </tr>
                </table>
            </td>
            <td style="width: 400px">
                <div class="pnlCurvyWhite" id="divImageDescription" runat="server" style="font-size: x-small; height: 140px;">
                    Imageo has received European Community research funding and is carried out in the context of the Galileo FP7 R&amp;D programme supervised by the GSA.<br />
                    The context of this webpage is the sole responsability of the ImaGeo consortium and can in no way be taken to reflect the views of the European Union or the European GNSS Supervisory Authority<br />
                    <br />
                    <center>
                        <asp:Image ID="Image1" runat="server" ImageUrl="~/images/eu.png" />
                        <asp:Image ID="Image2" runat="server" ImageUrl="~/images/fp7.png" />
                        <asp:Image ID="Image3" runat="server" ImageUrl="~/images/sponsor_gsa.png" />
                        <asp:Image ID="Image4" runat="server" ImageUrl="~/images/sponsor_galileo.png" />
                    </center>
                </div>
            </td>
        </tr>
    </table>
</asp:Content>
